<!DOCTYPE html>
<html lang="pt-BR">
	<head>
      <meta charset="utf-8"/>
      <title>POP image - É um gerenciador que cria um pop up leve e suave de imagens, sem que precise abrir outra aba ou algo que cai entre nós é uma bosta</title>	
      <!--link rel="icon" type="image/png" href="img/favicon.png" /-->
      <meta name="viewport" content="width=device-width, user-scalable=no"/>
      <link rel="stylesheet" href="https://jul10l1r4.github.io/Texto-farmatacao/principal.css"/>
      <link rel="stylesheet" href="../css/layout.css"/>
			<link rel="icon" href="logo.gif" type="image/gif"/>
      <meta name="author" content="Julio Lira"/>
			<meta name="theme-color" content="#666">
      <meta name="robots" content="index, follow">
			<meta property="article:published_time" content="2018-03-16T10:00:00+00:00" />
      <meta property="og:site_name" content="POP-IMAGE" />
      <meta property="og:url" content="https://jul10l1r4.github.io/POP-image" />
      <meta name="description" content="O efeito de deslizamento é algo almejado por muitos e também bastante usado, trás aquela sensação de qualidade e de minimalismo, porém, nem sempre passa de sensação, muitas vezes os códigos são eternamente monstrons, são bibliotecas de mais 3000 linhas de códigos que importam muitas coisas, leia um artigo sobre isso em"/>
      <meta name="keywords" content="segurança, security,sec, osec,roadsec,hack,hacking,pentest,web, invasion,RE,Julio Lira,http, https, erro, error, mensagem, criar, 404, html, php, c, css, javascript, java, go, python, haskell, git, not a bug, jul10l1r4, Julio Lira, br, zueira, memes, meme, mene, risos, rs, huehuehue, kkk, kkkkkkj, perdi a criatividade kkdkd, http, http meme resposta, api meme, api resposta, rootthings, root things, rootings"/>
      <meta property="og:title" content="POP image - É um gerenciador que cria um pop up leve e suave de imagens, sem que precise abrir outra aba ou algo que cai entre nós é uma bosta">
      <meta property="og:image" content="logo.jpeg"/>
      <meta property="og:description" content="Muitos códigos, não? Hahaha, sim apenas três linhas de códigos! muito facil, eu disse que era, e foi por isso que até agora não acredito!"/>
      <meta property="og:author" content="Julio Lira"/>
  <!-- twitter metatags-->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="POP image - É um gerenciador que cria um pop up leve e suave de imagens, sem que precise abrir outra aba ou algo que cai entre nós é uma bosta">
  <meta name="twitter:description" content="O efeito de deslizamento é algo almejado por muitos e também bastante usado, trás aquela sensação de qualidade e de minimalismo, porém, nem sempre passa de sensação, muitas vezes os códigos são eternamente monstrons, são bibliotecas de mais 3000 linhas de códigos que importam muitas coisas">
  <meta name="twitter:image" content="logo.gif">

			<script defer src="../Ecmascript/scroll.js"></script>
<!-- Facilitar indexação de ferramentas de busca --->
	<script type="application/ld+json">
{
	"name":"POP Image",
	"description":"O efeito de deslizamento é algo almejado por muitos e também bastante usado, trás aquela sensação de qualidade e de minimalismo, porém, nem sempre passa de sensação, muitas vezes os códigos são eternamente monstrons, são bibliotecas de mais 3000 linhas de códigos que importam muitas coisas...",
	"author":"Julio Lira",
	"@type":"Organization",
	"url":"https://jul10l1r4.github.io/POP-image/",
	"image":"banner.jpeg",
	"headline":"Julio Lira",
  "@context":"http://schema.org",
  "contactPoint": {
					"@type": "ContactPoint",
					"email": "jul10l1r4@ufrn.edu.br"
				}
}
		 </script>
			
    </head>
    <body>
			<header class="pop" id="top">
				<div id="to">
			    <h1><span class="pop-t">POP-IMAGE </span>
						<!--img src="https://emojipedia-us.s3.amazonaws.com/thumbs/160/facebook/111/smirking-face_1f60f.png"/-->
					</h1>
				</div>
			</header>
			<a id="down" href="#conteudo">Crie um suave box, para visualizar imagens porretas 🤘</a>
			<section class="medium-text">
				<h1 id="conteudo">Direto ao ponto "."</h1>

<p>Você pode instala-lo assim.</p>
<pre><code>npm install pop-image --save</code></pre>
<h1>POP-image <span class="emoj">🍺</span></h1>

<p>Tenha fluidez ao abrir uma imagem, vejo por aí muitos sites, onde apertam na imagem e sim a imagem abre grande, mas abre uma nova
 aba e realmente acho um pé no saco, porque tenho sempre que for abrir apertar no botão de voltar do navegador e voltar a página onde
 eu estava, mas este box faz apenas com JS puro um box que abre a imagem suspensa na mesma página(light box), a estilização fica por sua conta, mas
 se for preguiçoso já temos códigos montados, é só integrar, se quiser ver e criar uma sua, faça você mesmo.</p>

<h2>Veja o nosso manual <span class="emoj">📒</span></h2>

<p>Temos um respositório no <a href="https://notabug.org/Jul10l1r4/Guia-POP">NotABug.org</a> onde falará sobre como integrar em sua aplicação, de uma forma que se 
der uma atualização não venha danificar sua aplicação.</p>

<h1>Ele criará um botão de voltar ao topo <span class="emoj">🔝</span></h1>

<p>Usando este suporte onde se baseia em animação com <code>JS</code> tem suporte em todos os navegadores, e cria a animação de deslize 
até o topo.</p>

<h2>Use o efeito scroll, sem carregar trilhões de códigos <span class="emoj">🔥</span></h2>

<p>
	O efeito é feito com usando JS, poupando o máximo de processamentos necessários do lado do cliente, então fizemos algo sem a utilização de biblioteca,
	mas de uma forma eficiente, veja como você mesmo pode criar um botão assim com a função 
	<a href="https://jul10l1r4.github.io/artigos/Seja_performatico_-_efeito_scroll_com_6_linhas_sem_jquery/" target="_blank">scroll em seis linhas</a>,
	usando esses códigos do artigo é que montamos uma estrutura leve e performática para facilitar a utilização.
</p>

			<footer class="separador-top top6">
       <br/>
				<a href="https://jul10l1r4.github.io" target="_blank">
					← Ir para Julio Lira
				</a>
        |
				<a href="https://jul10l1r4.github.io/HTTP_-_Resposta/" target="_blank">
					Ir para HTTP Meme resposta →
				</a>
			</footer>
    </body>
  </html>
